<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    当前账户: 尊敬的<a style="color: blue;">admin</a >您好，您可以<a style="color: #405bd1; text-decoration: none;" href="../customer/kehu.jsp">返回客户列表</a>|<a style="color: #405bd1; text-decoration: none;" href="../index.jsp">退出当前账户</a><br/>
    <p class="shou" >欢迎来到管理员后台系统</p>
    <hr color="#808080" width="100%" size="1">
    <div style="text-align: center;">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="账号信息">
          <el-input v-model="formInline.user" placeholder="请输入账号信息"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-date-picker
              v-model="value1"
              type="date"
              placeholder="年/月/日 --:--">
          </el-date-picker>
          ~
          <el-date-picker
              v-model="value2"
              type="date"
              placeholder="年/月/日 --:--">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-row>
            <el-button  style="background-color: rgb(240, 143, 8);" type="primary" icon="el-icon-search"></el-button>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button v-on:click="pibut1(multipleSelection)" style="margin-left: 30px; margin-right: 0px;" type="primary">批量授权</el-button>
          <el-button v-on:click="pibut2(multipleSelection)" style="margin-left: 0px;" type="danger">批量重发</el-button>
        </el-form-item>
      </el-form>
  </div>
  <template>
    <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark"  style="width: 70% ;margin: 0px auto;"  @selection-change="handleSelectionChange">
      <el-table-column  type="selection"  width="55">
      </el-table-column>
      <el-table-column  prop="id"  label="序号"  width="55">
      </el-table-column>
      <el-table-column    prop="name"  label="注册账号"  width="80">
      </el-table-column>
      <el-table-column    prop="em"    label="注册邮箱"   width="150">
      </el-table-column>
      <el-table-column  prop="date" label="注册时间" width="120">
      </el-table-column>
      <el-table-column  label="激活状态"  width="80"><template slot-scope="scope">{{zhuan1(scope.row.activa)}}</template>
      </el-table-column>
      <el-table-column  label="账号授权"  width="80"><template slot-scope="scope">{{zhuan2(scope.row.empower)}}</template>
      </el-table-column>
      <el-table-column  label="当前状态"  width="80"><template slot-scope="scope">{{zhuan3(scope.row.current)}}</template>
      </el-table-column>
      <el-table-column  prop="remainder"  label="剩余时间"  width="100">
      </el-table-column>
      <el-table-column  prop="end" label="最后登录" width="120"> 
      </el-table-column>
      <el-table-column label="操作"  width="240">
        <template slot-scope="scope">
          <el-button v-if="tr(scope.row.activa)" v-on:click="butt(scope.row)" type="primary" >重发激活</el-button>
          <el-button v-else v-on:click="butt(scope.row)" type="primary" plain >激活取消</el-button>
          <el-button v-if="trr(scope.row.empower)" v-on:click="butt2(scope.row)" type="danger" >授权取消</el-button>
          <el-button v-else v-on:click="butt2(scope.row)" type="warning">授权通过</el-button>
        </template>
          
      </el-table-column>
    </el-table>
    
  </template>
    <el-pagination
    style="text-align: center; margin-top: 50px;"
    background
    layout="prev, pager, next"
    :total="1000">
    </el-pagination>
    
  </div>


</body>


  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
            visible: false,
            value1: '',
            value2: '',
            formInline: {
            user: ''
            },
              tableData: [{
              id:1,
              name: '王小虎',
              em:'10024@qq.com',
              date: '2016-05-03',
              activa:0,
              empower:0,
              current:0,
              remainder:"22分钟",
              end:'2022-04-03'
            }, {
              id:2,
              name: '王小虎',
              em:'10024@qq.com',
              date: '2016-05-03',
              activa:0,
              empower:0,
              current:0,
              remainder:"22分钟",
              end:'2022-04-03'
            }, {
              id:3,
              name: '王小虎',
              em:'10024@qq.com',
              date: '2016-05-03',
              activa:0,
              empower:0,
              current:0,
              remainder:"22分钟",
              end:'2022-04-03'
            }, {
              id:4,
              name: '王小虎',
              em:'10024@qq.com',
              date: '2016-05-03',
              activa:0,
              empower:0,
              current:1,
              remainder:"22分钟",
              end:'2022-04-03'
            }, {
              id:5,
              name: '王小虎',
              em:'10024@qq.com',
              date: '2016-05-03',
              activa:1,
              empower:0,
              current:0,
              remainder:"22分钟",
              end:'2022-04-03'
            }, {
              id:6,
              name: '王小虎',
              em:'10024@qq.com',
              date: '2016-05-03',
              activa:0,
              empower:1,
              current:0,
              remainder:"22分钟",
              end:'2022-04-03'
            }, {
              id:7,
              name: '王小虎',
              em:'10024@qq.com',
              date: '2016-05-03',
              activa:1,
              empower:1,
              current:1,
              remainder:"22分钟",
              end:'2022-04-03'
            }],
            multipleSelection: []
        }
      },
      methods: {
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        butt:function(row){
          if(row.activa==0){
            row.activa=1
          }else{
            row.activa=0
          }
        },
        butt2:function(row){
          if(row.empower==0){
            row.empower=1
          }else{
            row.empower=0
          }
        },
        tr(activa){
          return activa == 0 ? true : false
        },
        trr(empower){
          return empower == 0 ? false : true
        },
        pibut1(multipleSelection){
          for(var mult in multipleSelection){
            multipleSelection[mult].empower=1
          }
        },
        pibut2(multipleSelection){
          for(var mult in multipleSelection){
            multipleSelection[mult].activa=1
          }
        },
        zhuan1(activa){
          if(activa==0){
            return "未激活"
          }else{
            return "已激活"
          }
        },
        zhuan2(empower){
          if(empower==0){
            return "未授权"
          }else{
            return "已授权"
          }
        },
        zhuan3(current){
          if(current==0){
            return "禁止登录"
          }else{
            return "正常登录"
          }
        }
      },
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
    })
  </script>
  <style scoped>
    .shou{
        margin-top: 50px;
        font-size: 45px;
        text-align: center;
        color: #474646;
    }
</style>
</html>